<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 所谓的找到某个盒子交给Vue管理 -->
    <!-- 本质上其实只找到这个盒子所在的位置 -->
    <!-- 有template就把template渲染到这个位置 -->
    <!-- 没有template就把找到的盒子当做template -->
    <div id="app">
        <p>{{ msg }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            template: '<div id="template"> <h2>{{ msg }}</h2> </div>',
            data() {
                return {
                    msg: 'hello'
                }
            },
        })
    </script>
</body>
</html>